<template>
<div class="wrapper">
    <div v-if="articles.rows[0]" class="list_height">
    <h2 class="artice_list"><p>{{ wordlist }}</p></h2><hr>
        <div class="mt-4" v-for="(item,index) in articles.rows" :key="index"  @click="intoDetail(item)">
            <!-- 图片在左 -->
            <b-card v-if="index%2==0" img-src="http://img.sharpfactory.top/sky-4888757.jpg"  img-alt="Card image" img-left class="mb-3 hover-shadow chose"  >
            <h2 class="tittle"><span>{{item.title}}</span></h2>
            <p class="details"><span>{{item.createdYear}}-{{item.createdMonth}}-{{item.createdDay}}&nbsp&nbsp{{item.tags}}</span></p><hr class="clear">
            <b-card-text class="synopsis">
                {{item.synopsis}}
            </b-card-text>
            </b-card>
            <!-- 图片在右 -->
            <b-card v-if="index%2!=0" img-src="http://img.sharpfactory.top/landscape-4843193.jpg" img-alt="Card image" img-right class="hover-shadow chose" >
            <h2 class="tittle"><span>{{item.title}}</span></h2>
            <p class="details"><span>{{item.createdYear}}-{{item.createdMonth}}-{{item.createdDay}}&nbsp&nbsp{{item.tags}}</span></p><hr class="clear">
            <b-card-text class="synopsis">
                {{item.synopsis}}
            </b-card-text>
            </b-card>
        </div>
        <sorter  :tips="tips" :tag="tag" :count="articles.count" />
    </div>
    <div class="nothing" v-else>
        <span>没有相关结果...</span>
    </div>
</div>  
</template>

<script>
import Axios from 'axios';
import store from '@/store/index.js';
import { getArticles } from '@/../api/api.js';
import Sorter from '@/components/common/Sorter';
import marked from 'marked';
export default {
    name: 'BlogList',
    components:{
        Sorter
    },
    props: {
        tag: {
            type:Object,
            default: {
                id: 0,
                tag:null
            }
        },
        tips: {
            type:String,
            default: ""
        }
    },
    data () {
        return { 
            wordlist: '文章列表' ,
            articles:{},
        }
    },
    created() {
        Axios.get(getArticles).then(
            Response => {
                if (Response.data.message == 'success') {
                    this.articles = Response.data.data;
                }
            })
            .catch(err => {
                console.log(err);
            })
    },
    methods: {
        intoDetail(article) {
            store.commit('updateArticle',article);
            this.$router.push({
                path: "/details",
                query: {
                    id: article.id
                }
            });
        }
    },
    watch: {
        tag(newVaule,oldVaule) {
            this.tag = newVaule;
            Axios.get(getArticles,{
                params: {
                    tag: (this.tag.tag ?'['+this.tag.tag+']':this.tag.tag)
                }
            })
            .then(Response => {
                if (Response.data.message == 'success') {
                    this.articles = Response.data.data;
                }
            })
            .catch(err => {
                    console.log(err);
                })
        },
        tips(newVaule,oldVaule) {
            this.tips = newVaule;
            if (newVaule == "") {
                Axios.get(getArticles).then(
                    Response => {
                        if (Response.data.message == 'success') {
                            this.articles = Response.data.data;
                        }
                })
                .catch(err => {
                    console.log(err);
                })
            }
            else {
                Axios.get(getArticles,{
                    params: {
                        tips: this.tips
                    }
                })
                .then(Response => {
                    if (Response.data.message == 'success') {
                        this.articles = Response.data.data;
                    }
                })
                .catch(err => {
                        console.log(err);
                });
            }
        },
        'articles.rows': {
            handler(newVaule,oldVaule) {
                this.articles.rows = newVaule;
                let rule1 = new RegExp("<h.+?>.+</h.+?>", "g");
                let rule2 = new RegExp("<.+?>", "g");
                this.articles.rows.forEach(element => {
                    element.synopsis = marked(
                        element.markdown,
                        {
                            sanitize: true,
                        })
                        .replace(rule1, '')
                        .replace(rule2, '');
                });
            },
            deep: true,
            immediate:true
        }
    },
}
</script>

<style lang="stylus" scoped>
.chose
    cursor pointer
.artice_list
    padding 30px  20px
.list_height
    padding-bottom 30px
img 
    width 360px
    height 300px
    overflow hidden 
.tittle
    float left
    display inline
.details
    float right
    display inline
    padding-top 15px 
    padding-right 40px
    font-size 12px
    padding-bottom 8px
.clear
    clear both      
.nothing
    font-size 20px
    padding 50px 50px 257px 50px
    text-align center
    color #919191
.synopsis
    margin 30px
    table-layout fixed
    width 800px
    font-size: 17px
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
</style>